<template>
    <div>
      <el-card style="max-width: 60vw; margin-left: 12vw;margin-top: 5vw;">
        <div
          style="
            text-align: center;
            font-size: 2vw;
            font-weight: bold;
            margin-bottom: 1vw;
            margin-top: 1.8vw;
          "
        >
          专家人员注册入口
        </div>
        <el-form :model="form" label-width="auto" style="max-width: 600px;margin-left: 16vw;margin-top: 3vw; height:15vw">
          <el-form-item label="账户姓名:" style="margin-left: -0.7vw;height: 3vw;">
            <el-input
              v-model="form.userName"
              style="width: 20vw; margin-left: 0.7vw;height: 2.5vw;"
            />
          </el-form-item>
          <el-form-item label="账户密码：" style="height: 3vw;">
            <el-input
              v-model="form.password"
              show-password
              style="width: 20vw;height: 2.5vw;"
            />
          </el-form-item>
  
          <el-form-item style="margin-left: 3vw;margin-top: 3vw;">
            <el-button type="primary" @click="onSubmit" style="width: 20vw;height: 3vw;"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
import { ref,inject } from "vue";
import { ElMessage } from "element-plus";
const axios = inject("axios")
const updateState = ref('')
  
  const form = ref({
    userName: "",
    password: "",
    role: "专家人员",
  });

  const onSubmit = async () => {
  if (form.value.userName == "" || form.value.password == "") {
    ElMessage({
      message: "注册信息失败，请输入完整的信息！",
      type: "error",
      plain: true,
    });
  } else {
    await axios
      .post("Admin/newUserInfo", {
        userName: form.value.userName,
        role: form.value.role,
        password: form.value.password,
      })
      .then((response) => {
        updateState.value = response.data;
        console.log(updateState.value);
      })
      .catch((error) => {
        console.log(error);
      });

    if (updateState.value == 1) {
      ElMessage({
        message: "注册信息成功！",
        type: "success",
        plain: true,
      });
      updateState.value = 0;
    } else {
      ElMessage({
        message: "注册信息失败！",
        type: "error",
        plain: true,
      });
    }
  }

  location.reload()
}
</script>

<style scoped>
</style>